<html>
  <head>
    <style>
      body {
        font-family: Helvetica, Verdana, Arial, Sans;
      }
    </style>
    <script type="text/javascript"> 
      document.addEventListener("DOMContentLoaded", function(event) {
        console.log(document.readyState + " : " + event);
  
        // Exercise villabus
        var url  = "http://localhost/cgi-bin/villagebus.lua/provision/router/00:11:22:33:44:55?foo=bar";
        var data = { foo : "bar", plink : "plonk" };

        $("#get").onclick = function() {
          console.log("get");
          var xhr = villagebus.GET(url, function(error, response) {
            if (error) return $("#post").innerHTML = "Error: " + error;
            $("#get").innerHTML = JSON.stringify(response);
          });
        };

        $("#post").onclick = function() {
          console.log("post");
          var xhr = villagebus.POST(url, data, function(error, response) {
            if (error) return $("#post").innerHTML = "Error: " + error;
            $("#post").innerHTML = JSON.stringify(response);      
          });
        };

        return false;
      }, false);
      
      // https://developer.mozilla.org/En/Code_snippets/QuerySelector
      function $(selector, element)  {
        if (!element) {
          element = document;
        }
        return element.querySelector(selector);
      };

    </script>
    <script type="text/javascript" src="villagebus.js"></script>
  </head>
  <body>

    <div id="get">
      <button>get</button>
    </div>

    <div id="post">
      <button>post</button>
    </div>

    <div id="put">
      <button>put</button>
    </div>

    <div id="delete">
      <button>delete</button>
    </div>

    <div id="head">
      <button>head</button>
    </div>



  </body>
</html>
